{% extends 'base/base.html' %}
{% block title %}
    首页
{% endblock %}
{% block main %}

{#    {{ object_list }} {{ is_paginated }} {{ paginator }} {{ page_obj.has_previous }}#}
<style>
        .list-group {
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 0;
            list-style: none;
            {#position: absolute;#}
        }
        .list-group li {
            width: 100%;
            flex: 1 1 0;
            margin: 0;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
            justify-content: space-between;
        }
        .imgs{
            width: 100%;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul li, li{
            list-style: none;
        }
        .list-right, .list-group{
            padding: 10px;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .list-right{
            width: 20%;
        }
        .text3{
                width: 100%;
				margin-left: 0;
				height: 800px;
				overflow: auto;
			}
        .text3 .header5 li{
            margin-top: 10px;
            list-style: none;
        }
        .text3 .header5 li a{
            font-size: 16px;
            color: black;
        }
        .text3 .header5 li span{
            font-size: 12px;
            color: #27a;
        }
        .text3 .header5 li+ li{
            border-top:1px solid #eaeaea;
        }
        .text3 .header5 li span:hover{
            background-color: #27a;
            color: white;
        }
    </style>


    <img src="/media/imgs/广告.jpg" alt="" class = "imgs">
    <hr>


    <ul class="list-group left">
        {% for article in object_list %}
         <li class="list-group-item ">
             <a href="{% url 'main:article_detail' article.id %}"> {{ article.content|safe }} {{ article.title }}</a>
         </li>
        {% endfor %}
    </ul>

    <div class = "list-right right">
        <div class = "text3">
            <div class="header5">
                <ul class="main">
                <li><a href="">畅销图书榜</a></li>
                    {% for item in most_viewed_articles|slice:":5" %}
                     <li>
                         <a href="{% url 'main:article_detail' item.article.id %}"><span>{{ forloop.counter }} {{ item.article.title }}</span></a>
                     </li>
                    {% endfor %}
				</ul>
            </div>
            
            <hr>
            
            <div class="header5" style="margin-top: 20px;">
                <ul class="main">
                    <li><a href="">图书浏览量排行榜</a></li>
                    {% if most_viewed_articles %}
                        {% for item in most_viewed_articles %}
                        <li>
                            <a href="{% url 'main:article_detail' item.article.id %}" style="display: block;">
                                <span>{{ forloop.counter }}{{ item.article.title }}</span>
                                <span style="float: right; color: #ff6b6b;">浏览: {{ item.view_count }}次</span>
                            </a>
                        </li>
                        {% endfor %}
                    {% else %}
                        <li><span>暂无浏览记录</span></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>

    {% if object_list|length > 0 %}

    {% block section %}
    <nav aria-label="Page navigation">
      <ul class="pagination">
        {% if page_obj.has_previous %}

        <li>
        <a href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
        {% else %}
        <li class="disabled">
        <a href="#" aria-label="Previous">
        {% endif %}

            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>

          {% for pn in paginator.page_range %}
              {% if pn != page.number %}
              <li><a href="?page={{ pn }}&category={{ category }}">{{ pn }}</a></li>
              {% else %}
              <li class="disabled"><a href="?page={{ pn }}&category={{ category }}">{{ pn }}</a></li>
              {% endif %}
          {% endfor %}


        {% if page_obj.has_next %}
        <li>
        <a href="?page={{ page_obj.next_page_number }}" aria-label="Next">
        {% else %}
        <li class="disabled">
            <a href="#" aria-label="Next">
            {% endif %}

                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
      </ul>
    </nav>
        {% endblock %}

    {% endif %}
    <hr>


{% endblock %}

